<template>
    <div>
        <el-drawer v-model="showDialog" :show-close="false" size="900px" :modal="false" modal-class="AIdrawer"
                   class="AIdrawerWrapper">
            <div class="w-full h-full box-border flex flex-col gap-8px">
                <div class="bg-#ffffff rounded-8px w-full px-20px py-24px shrink-0 box-border">
                    <div
                        class="border-b-1px border-b-#F4F4F7 border-b-solid w-full box-border pb-20px mb-20px flex justify-between items-start">
                        <div class="flex items-center gap-20px">
                            <img src="https://pic.imgdb.cn/item/660cc5099f345e8d03b0a3b8.jpg"
                                 class="w-50px h-50px rounded-8px" alt="">
                            <div class="flex flex-col gap-8px">
                                <div class="flex items-center gap-8px">
                                    <text class="text-#3D3D3D text-18px font-bold">阳光保险</text>
                                    <text class="text-14px text-#00D679">已启用</text>
                                </div>
                                <div class="text-#9497B1 text-14px">BS240001</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-10px">
                            <el-dropdown placement="bottom" hide-on-click>
                                <div
                                    class="flex items-center gap-4px text-#9497B1 cursor-pointer text-14px rounded-4px border-solid border-1px border-# py-5px px-10px box-border">
                                    更多设置 <img class="w-12px h-8px" src="../img/bottom.png" alt=""></div>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>编辑</el-dropdown-item>
                                        <el-dropdown-item @click="onDisabled">禁用</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <el-button type="primary" size="small" @click="showDialog = false">返回</el-button>
                        </div>
                    </div>
                    <div class="flex items-center gap-10px">
                        <div class="flex-1 flex gap-12px flex-col items-start">
                            <div class="text-#565868 text-14px">有效方案</div>
                            <div class="text-20px text-#202536">1</div>
                        </div>
                        <div class="flex-1 flex gap-12px flex-col items-start">
                            <div class="text-#565868 text-14px">员工在保信息</div>
                            <div class="text-20px text-#202536">2</div>
                        </div>
                        <div class="flex-1 flex gap-12px flex-col items-start">
                            <div class="text-#565868 text-14px">客户信息</div>
                            <div class="text-20px text-#202536">3</div>
                        </div>
                        <div class="flex-1 flex gap-12px flex-col items-start">
                            <div class="text-#565868 text-14px">案件总数</div>
                            <div class="text-20px text-#202536">4</div>
                        </div>
                    </div>
                </div>
                <div class="bg-#ffffff rounded-8px w-full h-100px flex-1 overflow-auto py-20px px-22px box-border">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane v-for="(item,i) in tabList" :key="i" :label="item.label" :name="item.name">
                            <keep-alive>
                                <component :type="item.value" :is="components[item.value as keyof typeof components]"/>
                            </keep-alive>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import {createVNode, ref, watch} from 'vue'
import {confirm} from '@/utils/utils'
import type {TabsPaneContext} from 'element-plus'
import baseMsg from '../components/detail-components/base-msg.vue'
import planMsg from '../components/detail-components/plan-msg.vue'
import craftMsg from '../components/detail-components/craft-msg.vue'
import clientMsg from '../components/detail-components/client-msg.vue'
import ruleOfInsure from '../components/detail-components/rule-of-insure.vue'
import ruleOfEmail from '../components/detail-components/rule-of-email.vue'
import staffUnderWarrantyMsg from '../components/detail-components/staff-under-warranty-msg.vue'

const showDialog = ref(false)
const activeName = ref('0')
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const components = {
    0: baseMsg,
    1: planMsg,
    2: craftMsg,
    3: staffUnderWarrantyMsg,
    4: clientMsg,
    5: ruleOfInsure,
    6: ruleOfEmail,
}
const tabList = ref([
    {
        label: '基本信息',
        name: '0',
        value: 0,
        component: ''
    },
    {
        label: '方案信息',
        name: '1',
        value: 1,
        component: ''
    },
    {
        label: '工种信息',
        name: '2',
        value: 2,
        component: ''
    },
    {
        label: '员工在保信息',
        name: '3',
        value: 3,
        component: ''
    },
    {
        label: '客户信息',
        name: '4',
        value: 4,
        component: ''
    },
    {
        label: '保险规则',
        name: '5',
        value: 5,
        component: ''
    },
    {
        label: '邮件规则',
        name: '6',
        value: 6,
        component: ''
    },
])
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const onDisabled = async () => {
    await confirm('提示', createVNode('span', null, [
        '确定禁用',
        createVNode('strong', {
            style: {
                color: 'red'
            }
        }, 1111),
        '吗？该客户将无法进行任何数据操作。'
    ]))
    console.log('禁用')
}
const emits = defineEmits(['update:show'])
watch(() => props.show, (newVal) => {
    showDialog.value = newVal
    if (newVal) {
        console.log(11)
    }
})

watch(showDialog, (newVal) => {
    emits('update:show', newVal)
})
</script>
<style lang="scss" scoped>
.AIdrawerWrapper {
    margin-left: auto;
}

:deep(.AIdrawerWrapper) {
    background-color: #FAFAFC !important;
}

:deep(.el-drawer__header) {
    display: none;
}

:deep(.AIdrawer) {
    margin-left: auto;
    width: 0;
}


.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

:deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>